import { Breadcrumb, Card, Button } from 'antd';
import React from 'react';
import { withRouter, Link } from 'react-router-dom';

const breadcrumbNameMap = {
  '/limitManager': '限额管理',
  '/limitManager/add': '添加限额',
  '/limitManager/+update/:params': '修改限额',
  '/limitManager/+operationrecord/:params': '限额操作记录',
  '/limitManager/+details/:params': '限额详情',
  '/limitManager/merchantlimit': '个性限额管理',
  '/limitManager/+limitIntercept/:params':'限额拦截记录',

  '/merchantlimit': '个性限额管理',
  '/limitManager/+add/:params': '个性限额设置',
  '/merchantlimit/+update/:params': '修改个性限额',
  '/merchantlimit/+operationrecoerd/:params': '个性限额操作记录',
  '/merchantlimit/+details/:params': '个性限额详情',
    '/merchantlimit/+merchantIntercept/:params':'个性限额拦截记录',
    '/rulesManager':'规则管理',
    '/rulesManager/+rulesModify/:params': '风控规则修改',
    '/rulesManager/+rulesDetails/:params':'规则详情',
    '/merchantManager':'商户风险事件处理',
    '/merchantManager/+merchantRecord/:params':'商户历史预警操作记录',
    '/merchantManager/+merchantDetails/:params':'风险详情',
    '/openmanager/+opendrecord/:params': 'Openid 历史预警操作记录',
    '/openmanager/+opendetail/:params': 'Openid近期交易流水',
    '/openmanager': '用户Openid 风险事件处理',
};

@withRouter
export default class BreadCrumbComs extends React.Component{
  state = {
    breadcrumbItems:null,
    docTitle:'',
  }
  componentWillReceiveProps(nextProps){
    if(nextProps.location.pathname !== this.props.location.pathname){
      this.setBreadCrumItem(nextProps);
    }
  }

  componentWillMount(){

    this.setBreadCrumItem(this.props);
  }

  setBreadCrumItem(props){

    const { location } = props;
    const pathSnippets = location.pathname.split('/').filter(i => i);
    const extraBreadcrumbItems = pathSnippets.map((v, index) => {
        if(v.indexOf('+') >= 0 ){

        } else if( index > 0 && pathSnippets[index-1].indexOf('+')>=0){
          const url1 = `/${pathSnippets.slice(0, index ).join('/')}/:params`;
          const url2 = `/${pathSnippets.slice(0, pathSnippets.length ).join('/')}`;
          if(breadcrumbNameMap[url1]){
            return (
              <Breadcrumb.Item key={url2} name={breadcrumbNameMap[url1]}>
                <Link to={url2}>
                  {breadcrumbNameMap[url1]}
                </Link>
              </Breadcrumb.Item>
            );
          }

        } else {
          const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
          if(breadcrumbNameMap[url]){
            return (
              <Breadcrumb.Item key={url} name={breadcrumbNameMap[url]}>
                <Link to={url}>
                  {breadcrumbNameMap[url]}
                </Link>
              </Breadcrumb.Item>
            );
          } else {

          }

        }


    });
    const breadcrumbItems = [(
      <Breadcrumb.Item key="home">
          <Link to="/">首页</Link>
      </Breadcrumb.Item>
    )].concat(extraBreadcrumbItems);
    const x = _.compact(extraBreadcrumbItems)
    if(x.length >0){
      this.setState({breadcrumbItems:x,docTitle:x[x.length-1].props.name})
    }

  }

  render(){
    const { breadcrumbItems, docTitle } = this.state;
    return (
      <Card hoverable={true} style={{marginBottom: '10px'}} bodyStyle={{padding:'10px',marginBottom:'10px'}}><Breadcrumb >
      { breadcrumbItems }
    </Breadcrumb>
        <h2>{docTitle}</h2>
          {
             location.pathname.split('/').length > 2? <Button style={{    marginTop: "20px",marginBottom: "-10px"}} type='primary' onClick={()=>this.props.history.goBack()}>返回</Button>:null
          }
      </Card>)
  }
}